<template>
  <Subtitle
    v-if="!hasUiSubtitle"
    :data="textList"
    :class="{ [$style['no-controller']]: !ttsa.controller, [$style.subtitle]: true }"
  />
</template>

<script
  lang="ts"
  setup
  name="XSubtitle"
>
import { useUIStore } from "@/store/ui";
import { useTtsaStore } from '@/store/ttsa'

const ttsa = useTtsaStore()

const textList = computed(() => {
  return ttsa?.subtitles || ''
})

const UIStore = useUIStore()
const UIList = computed(() => (UIStore.container as any) || []);

const hasUiSubtitle = computed(() =>
  Object.keys(UIList.value).some((i) => UIList.value[i].type === "widget_subtitle")
);

</script>

<style module lang="scss">
.subtitle {
  transition: all 0.6s ease;
  transform: translateY(0);
}

.no-controller {
  transform: translateY(80px);
}
</style>
